<template>
	<view class="shop-dialog-cont">
		<view class="shop-dialog">
			<!-- 占位 -->
			<view style="width: 100%;height: 20rpx;"></view>
			<!-- 头部 -->
			<view class="dialog-hearder">
				<!-- 头部数据依次为图片，价格，关闭图标 -->
				<view class="hearder-top">
					<!-- 图片 -->
					<view class="hearder-top-left">
						<image :src="skuImage"></image>
					</view>
					<!-- 价格 -->
					<view class="hearder-top-conter">
						<text style="color: #f22127;">￥</text>
						<text style="color: #f22127;font-size: 40rpx;">{{skuform.price}}</text>
					</view>
					<!-- 关闭图标 -->
					<view class="hearder-top-right">
						<image src="../../static/icon/close.png" mode="" style="width: 40rpx;height: 40rpx;"@click="close"></image>
					</view>
				</view>
				<view class="hearder-bottom">
					<image src="../../static/icon/item1.png" mode="" style="width: 50rpx;height: 50rpx;margin: auto 15rpx;" ></image>
					<text style="font-size: 26rpx;color: #3A3A3A;">服务保障</text>
					<text style="font-size: 26rpx;color: #B2BABB;margin-left: 40%;">7天无理由退货</text>
				</view>
			</view>
			<!-- 占位 -->
			<view style="width: 100%;height: 3rpx;background-color: #EAECEE;"></view>
			<!-- 颜色 -->
			<view class="dialog-color">
				<view class="dialog-color-header">
					<text>颜色</text>
					<text style="margin-left: 5rpx;">(10)</text>
				</view>
				<view class="color-conten">
					<view class="color-list" v-for="(style , index) in skuform.styleList"   :key="index" @click="chooseStyle(style,index)">
						<view class="color-name" :class="index==colorClick?'cclick':''">
							{{style}}
						</view>
					</view>
				</view>
				
			</view>
			<!-- 占位 -->
			<view style="width: 100%;height: 3rpx;background-color: #EAECEE;"></view>
			<!-- 尺寸 -->
			<view class="dialog-size">
				<view class="size-title">
					<text>尺码/版本</text>
				</view>
				<view class="size-name-cont" >
					<view v-for="(size , index) in skuform.sizeList":key="index" @click="chooseSize(size,index)" :class="index==sizeClick?'cclick':''">
						{{size}}
					</view>
				</view>
			</view>
			<!-- 占位 -->
			<view style="width: 100%;height: 3rpx;background-color: #EAECEE;"></view>
			<!-- 购买数量 -->
			<view class="dialog-shop-num">
				<view class="shop-num-left">
					购买数量
				</view>
				<view class="shop-num-rigth">
					<view style="width: 100%;height: 1rpx;"></view>
					<view class="add-sun-num">
						<view class="num-sub" @click="numSub">
							-
						</view>
						<input type="text" v-model="shopNum"/>
						<view class="num-add" @click="numAdd">
							+
						</view>
					</view>
				</view>
			</view>
			<!-- 占位 -->
			<view style="width: 100%;height: 3rpx;background-color: #EAECEE;"></view>
			<!-- 操作 -->
			<view class="operate">
				<view class="operate-left" @click="addCart">
					加入购物车
				</view>
				<view class="operate-right" @click="buy">
					立即购买
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import store from "../../store/index.js"
	import http from "../../util/httpRequest.js"
	export default{
		components:{
			
		},
		data(){
			return{
				shopNum:1,
				colorClick:0,
				sizeClick:0,
				style:null,
				size:null,
				paynow:{
					spuId:null,
					image:null,
					name:null,
					style:null,
					store:null,
					size:null,
					price:null,
					num:null,
					skuIdList:null,
				},
				payOrderList:[]
			}
		},
		computed:{
			skuform(){
				return store.state.common.shopData
			},
			skuImage(){
				return store.state.common.shopImg
			}
		},
		methods:{
			//关闭弹出层
			close(){
				console.log("组件关闭")
				this.$emit("close")
			},
			changeValue(e){
				console.log(e)
			},
			numSub(){
				if(this.shopNum>1){
					this.shopNum = this.shopNum-1
				}
			},
			numAdd(){
				this.shopNum = this.shopNum+1
			},
			//选择样式，颜色
			chooseStyle(style,index){
				console.log(this.skuform)
				this.colorClick = index
				this.style = style
				this.changeImg()
			},
			
			chooseSize(size,index){
				// console.log(size)
				this.sizeClick = index
				this.size = size
				// console.log("尺寸",this.size)
			},
			//切换图片
			changeImg(){
				store.commit("shopImg",this.skuform.imgList[this.colorClick])
			},
			
			//加入购物车
			addCart(){
				var that = this
				// console.log(this.skuform)
				if(that.style == null){
					if(that.skuform.styleList==null){
						that.style = null
					}else{
						that.style = that.skuform.styleList[0]
					}
				}
				if(that.size == null){
					if(that.skuform.sizeList==null){
						that.size = null
					}else{
						that.size = that.skuform.sizeList[0]
					}
				}
				this.$emit("addCart",this.style,this.size,this.shopNum)
			},
			//立即购买
			buy(){
				var that = this
				// console.log(this.skuform)
				if(that.style == null){
					if(that.skuform.styleList==null){
						that.style = null
					}else{
						that.style = that.skuform.styleList[0]
					}
				}
				if(that.size == null){
					if(that.skuform.sizeList==null){
						that.size = null
					}else{
						that.size = that.skuform.sizeList[0]
					}
				}
				that.paynow.spuId = that.skuform.id,
				that.paynow.image = that.skuform.image,
				that.paynow.name = that.skuform.name,
				that.paynow.store = that.skuform.store,
				that.paynow.style = that.style,
				that.paynow.size = that.size,
				that.paynow.num = that.shopNum,
				that.paynow.price = that.shopNum*that.skuform.price,
				that.paynow.skuIdList = that.skuform.skuId
				
				store.commit("payType",2)
				store.commit("paynowform",that.paynow)
				// console.log("组合数据",that.payOrderList)
				uni.reLaunch({
					url:"/pages/common/payOrder",
					success() {
						store.commit("router","/pages/common/shop")
					}
				})
				
				
				
				
			}
			
			
			
		}
	}
</script>

<style scoped>
	/* 商品弹出层，选择sku */
	.shop-dialog-cont{
		width: 100%;
		/* height: 1300rpx; */
		background-color: #FFFFFF;
	}
	.shop-dialog{
		margin: auto auto;
		width: 90%;
		height: 1400rpx;
		/* background-color: #18BC37 */
		
	}
	.dialog-hearder{
		margin-bottom: 20rpx;
		width: 100%;
		height: 200rpx;
		/* background-color: #EC7063; */
	}
	.dialog-color{
		margin: 20rpx auto;
		width: 100%;
		/* height: 270rpx; */
		/* background-color: #D7BDE2; */
	}
	.dialog-size{
		margin: 20rpx auto;
		width: 100%;
		/* height: 150rpx; */
		/* background-color: #ABEBC6; */
	}

	/* 弹出层 hearder-top 依次为图片 价格 关闭图标*/
	.hearder-top{
		display: flex;
		width: 100%;
		height: 140rpx;
		/* background-color: #007AFF; */
	}
	.hearder-top-left{
		/* width: 130rpx;
		height: 140rpx; */
		/* overflow: hidden; */
		border-radius: 7rpx;
		
	}
	.hearder-top-left>image{
		width: 130rpx;
		height: 140rpx;
		border-radius: 7rpx;
	}
	.hearder-top-conter{
		margin-left: 15rpx;
	}
	.hearder-bottom{
		display: flex;
		margin-top: 7rpx;
		width: 100%;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 15rpx;
		background-color: #F2F3F4;
		
	}
	.hearder-top-right{
		margin-left: 60%;
		
	}
	.dialog-color-header{
		width: 100%;
		height: 40rpx;
		line-height: 40rpx;
		/* background-color: #43E0F4; */
	}
	.color-conten{
		display: flex;
		flex-flow: wrap;
		width: 100%;
		
	}
	.color-list{
		margin-right: 10rpx;
	}

	.color-name{
		margin-top: 7rpx;
		
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		border-radius: 7rpx;
		background-color: #E5E8E8;
		color: #1E1E1E;
	}
	.size-title{
		width: 100%;
		height: 40rpx;
		line-height: 40rpx;
		/* background-color:#1CB3C5; */
	}
	.size-name-cont{
		display: flex;
		width: 100%;
		margin-top: 10rpx;
		flex-flow: wrap;
		
	}
	.size-name-cont>view{
		margin-right: 7rpx;
		margin-top: 7rpx;
		height: 40rpx;
		/* width: 70rpx; */
		line-height: 40rpx;
		text-align: center;
		font-size: 24rpx;
		border-radius: 10rpx;
		background-color: #E5E8E8;
	}
	.dialog-shop-num{
		margin-top: 20rpx;
		display: flex;
		width: 100%;
		/* height: 120rpx; */
	}
	
	.shop-num-left{
		width: 30%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		/* background-color: #007AFF; */
	}
	.shop-num-rigth{
		margin-left: 40%;
		width: 30%;
		height: 100rpx;
		/* background-color: #18BC37; */
	}
	.add-sun-num{
		display: flex;
		margin-top: 15rpx;
		width: 100%;
		height: 70rpx;
		/* background-color: #007AFF */
	}
	.add-sun-num>input{
		margin: 0 15rpx;
		width: 100%;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		background-color: #E5E8E8;
	}
	.num-sub{
		width: 100%;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		border-radius: 7rpx;
		background-color: #E5E8E8;
	}
	.num-add{
		width: 100%;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		border-radius: 7rpx;
		background-color: #E5E8E8;
	}
	.num-add:active{
		background-color: #2ECC71;
		color: #FFFFFF;
	}
	.num-sub:active{
		background-color: #2ECC71;
		color: #FFFFFF;
	}
	.operate{
		display: flex;
		position: absolute;
		bottom: 0;
		width: 90%;
		height: 100rpx;
		border-radius: 70rpx;
		overflow: hidden;
		background-color: #F7DC6F;
	}
	.operate-left{
		width: 50%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 30rpx;
		background-color: #ffcd1f;
		background-image: linear-gradient(78deg, #ffcd1f 25%, #ff8b18 100%);


	}
	.operate-right{
		width: 50%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 30rpx;
		background-color: #fe6035;
		background-image: linear-gradient(90deg, #fe6035 25%, #ef1324 100%);


	}
	.operate-left:active{
		color: #F0F0F0;
		background-color: #08AEEA;
		background-image: linear-gradient(0deg, #08AEEA 0%, #2AF598 100%);

	}
	.operate-right:active{
		color: #F0F0F0;
		background-color: #21D4FD;
		background-image: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);

	
	}
	.cclick{
		color: #CD6155;
		
	}



</style>
